<link rel="stylesheet" type="text/css" href="__STATIC__/api/css/style.css" />
<script src="__STATIC__/api/js/flexible.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/api/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        
        <div class="layui-form-item">
            <label class="layui-form-label">模板名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input"  placeholder="请输入模板名称" value="" lay-verify="required" autocomplete="off">

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">模板内容</label>
            <div class="layui-input-block">
                <input type="text" name="xz_fields" class="layui-input"  placeholder="" value=""  >
                <input type="text" name="all_fields" class="layui-input"  placeholder="" value=""  >
                <input type="text" name="star_names" class="layui-input"  placeholder="请输入五星打分名称" value=""  >
                <!--自定义-->
                <div class="zdywx">
                    <p class="title"><span>-</span>自定义五星<span>-</span></p>
                    <div class="tags">

                        <div id="opts"></div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12  col-xs-12">
                                <div class="form-group">

                                    <button id="fat-btn" class="layui-btn layui-btn-normal layui-btn-sm"
                                            type="button">添加
                                    </button>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

<!--        <div class="layui-form-item layui-form-text">-->
<!--            <label class="layui-form-label">备注</label>-->
<!--            <div class="layui-input-block">-->
<!--                <textarea name="remark" class="layui-textarea"  placeholder="请输入备注" autocomplete="off"></textarea>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">二维码</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="text" name="qr_code" class="layui-input"  placeholder="请输入二维码" value="">-->
<!--            </div>-->
<!--        </div>-->
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit onclick="tj_qianzhi()" lay-filter="*">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>
<script src="/static/plugs/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    function xz_content(e)
    {

        var data_arr = [];
//index下标 element 当前选中的元素
        $('input[name^="fields"]').each(function(index,element) {
            //压入数组
            data_arr[index] = $(this).val();
        })
        var arr = [];
        var val = $("[name='fields']").val()
        alert(val);return false;
        if(val){
            arr = val.split(',');
        }
        $(e).toggleClass('on')
        if ( $(e).hasClass("on") ) {
            arr.push( $(e).attr('name'));
        }else{
            arr.splice(jQuery.inArray($(e).attr('name'),arr),1);
        }

        JSON.stringify(arr);
        console.log(arr)

        $("[name='fields']").val(arr)
    }
    function xz_image(e)
    {
        $(e).toggleClass('on')
        if ( $(e).hasClass("on") ) {
            // arr.push( $(this).attr('name'));
        }else{
            // arr.splice(jQuery.inArray($(this).attr('name'),arr),1);
        }
    }

    function xz_anonymous(e)
    {
        $(e).toggleClass('on')
        if ( $(e).hasClass("on") ) {
            // arr.push( $(this).attr('name'));
        }else{
            // arr.splice(jQuery.inArray($(this).attr('name'),arr),1);
        }
    }
    $('.tags ul li').click(function () {
        alert(432432);return false;
        var arr = [];
        var val = $("[name='fields']").val()
        if(val){
            arr = val.split(',');
        }

        // for(var i in arr){
        //     alert(arr[i])
        // }

        // alert(432432);return false;
        $(this).toggleClass('on')
        if ( $(this).hasClass("on") ) {
            arr.push( $(this).attr('name'));
        }else{
            arr.splice(jQuery.inArray($(this).attr('name'),arr),1);
        }
        JSON.stringify(arr);
        console.log(arr)

        $("[name='fields']").val(arr)

    });

    // layui.use(['form', 'layer', 'jquery' ], function () {
    //     $ = layui.jquery;
    //     var layer = layui.layer,
    //         form = layui.form;
    //
    //     form.on('checkbox(switchTest)', function(data){
    //         console.log(data.elem.value); //复选框value值，也可以通过data.elem.value得到
    //         console.log(data.elem.checked); //开关是否开启，true或者false
    //         console.log(data.elem); //得到 radio 原始 DOM 对象
    //         console.log(data.value); //被点击的 radio 的 value 值
    //         console.log(data.othis); //得到美化后的DOM对象
    //     });
    //
    // });

    function tj_qianzhi()
    {
        var arr = [];
        $("input[name='star_name']").each(function(){
            if($(this).val()){
                arr.push($(this).val());
            }

        })

        console.log(arr);
        $("[name='star_names']").val(arr);
        layui.use('form', function(){
            var form = layui.form,
                $ = layui.$;
            //各种基于事件的操作。
            form.on('submit(*)', function(data){
                console.log(data.field)
                $("[name='all_fields']").val(data.field);
                //将页面全部复选框选中的值拼接到一个数组中
                var arr_box = [];
                $('input[type=checkbox]:checked').each(function(i,v) {
                    console.log(v.name)

                    arr_box.push( $(this).val());
                });

                $("[name='xz_fields']").val(arr_box);
                //数组
                console.log(arr_box);
                // ["董先生的CSDN"]
                // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
    }
    function getSatrtInfo(){
        var arr = [];
        $("input[name='star_name']").each(function(){
            if($(this).val()){
                arr.push($(this).val());
            }

        })
        console.log(arr);return false;
        // console.log(star_name);return false;

        $("[name='star_names']").val(arr);
    }
    function del(obj){
        $(obj).parents(".row").remove();
    }
    $(function() {


        $("#fat-btn").click(function() {
            if($(".number:last").val() == "") {
                layer.msg('请输入五星打分名称', {
                    icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    //do something
                });
            } else {
                var htm = "";
                htm += "    <div class='row'>";
                htm += "    <div class='form-group'>";
                htm += "    <div class='col-md-4 col-sm-4  col-xs-4'>";
                htm += "    <input type='text' style='display:inline-block;width:80%' name='star_name' class='layui-input number' placeholder='请输入五星评分名称' id='' autocomplete='off'>";
                htm += "    <a href='#'  class='mar_l10' onclick='del(this)' style='float:none'><i class='fa fa-minus' style='color:#8B0000'></i>  </a>";

                htm += "     <div class='xzbq'>";
                htm += "     <p class='title''><span>-</span>选择任一标签<span>-</span></p>";
                // htm += "     <div class='tags'>";
                // htm += "     <div><input name='fields[]' value=''></div>";
                htm += "     <div class='layui-input-block'>";
                // htm += "     <li class='off' name='评价内容' onclick='xz_content(this)'>评价内容</li>";
                // htm += "     <li name='发图/视屏' onclick='xz_image(this)'>发图/视屏</li>";
                // htm += "     <li name='是否匿名' onclick='xz_anonymous(this)'>是否匿名</li>";
                htm += "     <input lay-filter='switchTest' type='checkbox' name='fields[]' lay-skin='primary'  value='评价内容' title='评价内容' lay-verify='required' />";
                htm += "     <input lay-filter='switchTest'  type='checkbox' name='fields[]' lay-skin='primary'  value='发图/视屏' title='发图/视屏' lay-verify='required' />";
                htm += "     <input lay-filter='switchTest' type='checkbox' name='fields[]' lay-skin='primary'  value='是否匿名' title='是否匿名' lay-verify='required' />";

                // htm += "     </div>";
                htm += "       </div>";
                htm += "       </div>";
                htm += "    </div></div>";
                htm += "    </div>";
                $('#opts').append(htm);
                $("#opts").trigger("create");
                layui.use('form',function(){
                    const form = layui.form;
                    form.render();
                });
            }
        });

    });
</script>
<!--<script type="text/javascript">-->
<!--    layui.use('form',function(){-->
<!--        const form = layui.form;-->
<!--        form.render();-->
<!--    });-->
<!--</script>-->